<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>账户更改</title>
    <link rel="stylesheet" href="css/layui.css"/>

</head>
<body>
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <label for="email"></label><input type="text" name="email" lay-verify="email" id="email" v-model="user.email" placeholder="请输入邮箱"
                                              autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱验证码</label>
        <div class="layui-input-inline">
            <label>
                <input type="text" name="emailcode" lay-verify="required" v-model="usercode.emailcode" placeholder="请输入验证码"
                       autocomplete="off" class="layui-input">
            </label>
        </div>
        <div class="layui-input-inline">
            <input id="send-email-code"
                   style="width: 120px;height: 39px;text-align: center;background-color: white;border: 1px solid #E2E2E2"
                   name="send-email-code" type="button"  @click="sendcode"  value="获取验证码"/>
        </div>
    </div>
    <div class="layui-form-item">
        <span id="emailTip"></span>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" id="submit-email-code" @click="verifycode" >确定</button>
        </div>
    </div>
</form>

<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script>

    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data() {
            return {

                //定义登录数据
                user: {
                    email: '',
                    emailcode: ''
                },
                loadIdx: null,

            };
        },

        //定义方法
        methods: {
            //登录
            sendcode() {
                //发送验证码
                this.loadIdx = layer.load();
                myAxios.post('/user/sendcode', this.user.email)
                    .then(res => {
                        layer.close(this.loadIdx);
                        if (res.data.success) {
                            layer.msg('发送成功！', {icon: 1});
                        } else {
                            layer.msg('发送失败', {icon: 2});
                        }
                    })
                    .catch(err => {
                        layer.close(this.loadIdx);
                        layer.msg('系统错误！', {icon: 2});
                    });
            },
            verifycode() {
                this.loadIdx = layer.load();
                myAxios.post('/user/verifycode', this.user.emailcode)
                    .then(res => {
                        layer.close(this.loadIdx);
                        if (res.data.success) {
                            layer.msg('验证码正确', {icon: 1}, () => {
                                window.location.href = 'test.html';
                            });
                        } else {
                            layer.msg('验证码错误，请重试', {icon: 2});
                        }
                    })
                    .catch(err => {
                        layer.close(this.loadIdx);
                        layer.msg('系统错误！', {icon: 2});
                    });

            }
        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
    }
    Vue.createApp(app).mount('#app')
</script>
</body>
</html>